import React, { Component } from "react";
import { NavBar, Icon } from "antd-mobile";
import "./searchCenter.scss";
import myAxios from "../../utils/myAxios"
import {withRouter} from "react-router-dom"
class searchCenter extends Component {
  state = {
    productList:[]
  }
  constructor() {
    super();
    this.inp = React.createRef();
  }
  searchClick = () => {
    // console.log(this.inp.current.value); // 输入框里面的内容
    var input_content = this.inp.current.value;
    if (!input_content) {
      alert("输入框内容为空！！");
    } else {
      console.log(input_content);
      myAxios.get("goods/qsearch",{
        params:{
          query:input_content
        }
      }).then(res=>{
        console.log(res);
        this.setState({
          productList:res
        })
      })
    }
  };
  detailClick=(e) => {
    // console.log(e.target.getAttribute("data-id"));
    var goods_id = e.target.getAttribute("data-id")
    this.props.history.push("/goodsDetail/"+goods_id)
  }
  
  render() {
    return (
      <div className="app-search">
        <div className="search-center">
          <NavBar
            icon={<Icon type="left" />}
            onLeftClick={() => window.history.back(1)}
            className="search-center-con"
          >
            搜索中心
          </NavBar>
          {/* 搜索 */}
          <div className="search-input">
            <i className="iconfont icon-fangdajing"></i>
            <input ref={this.inp} type="text" placeholder="请输入搜索内容" />
            <button type="button" onClick={this.searchClick}>
              搜索
            </button>
          </div>
          {/* 显示商品的区域,点击商品进入详情页面 */}
          <div className="search-products" onClick={this.detailClick}>
            {this.state.productList.map(v=>{
              return <div className="search-products-item" key={v.goods_id} data-id={v.goods_id}>
                {v.goods_name}
              </div>
            })}
          </div>
        </div>
      </div>
    );
  }
}
export default withRouter(searchCenter)